
@charset 'utf-8';

@htmlFontSize: 62.5%;
@bodyBg: #f5f5f5;
@bodyW: 1200px;
@HFontSize: 14px;
@SmallFontSize: 12px;
@fontSize: 12px;
@FontFamily: "Futura","PingHei","PingFang SC","Helvetica Neue","Helvetica",Arial,"Tahoma",Microsoft YaHei;
html{
    font-size: @htmlFontSize;
    background: @bodyBg;
    word-break: break-all;
}
body,button,input,select,textarea{
    font-size: @fontSize;
    font-family: @FontFamily;
    line-height: 1.5;
    max-width: @bodyW;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
*{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
ol,
dl,
dt,
dd,
li,
body,
form,
input,
textarea,
select,
button,
img,
area,
cite,
strong,
em,
table,
td,
th{
    outline: none;
    padding: 0;
    margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: @HFontSize;
}
small{
    font-size: @SmallFontSize;
}
img,
table,
td,
th {
    border-collapse: collapse;
    border: none;
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
}
// Iphone input 圆角 阴影样式重置
input{
  outline: none;
  border:0;
  -webkit-appearance: none !important;
  -webkit-tap-highlight-color: #fff;
  border-radius: 0;
}
input[type='checkbox'],
input[type='radio'],
input[type='button'],
button{
  cursor: pointer;
}
ul,ol,li,dl,dt,dd{
  list-style: none;
}
a,
a:hover,
a:active,
a:visited{
    font-size: inherit;
    color: inherit;
    text-decoration: none;
}
img[src=""]{
    display: none;
}
head,script{
  height: 0;
  display: none;
}
html.overflowHidden{
  height: 100%;
  body{
    height: 100%;
    overflow: hidden;
  }
}

.bootclearfix {
  *zoom: 1;
}
.bootclearfix:before,
.bootclearfix:after {
  display: table;
  line-height: 0;
  content: "";
  clear: both;
}

// com
    // 清楚浮动
    .clearfix(){
        *zoom: 1;
        &:before,
        &:after {
          display: table;
          line-height: 0;
          content: "";
          clear: both;
        }
    }
    // 未知宽高 上下 左右居中
  .CenCenter(){
      left: 50%;
      top: 50%;
      -webkit-transform: translate3d(-50%, -50%, 0);
      transform: translate3d(-50%, -50%, 0);
  }
  // leftPage 左侧 列表
  .leftPageUl(){
      -webkit-flex-direction: column;
      flex-direction: column;
      -webkit-flex-flow: column;
      flex-flow: column;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      li:last-child{
          height: auto;
          width: 100%;
          -webkit-box-pack: justify;
          -webkit-box-flex:1;
          flex: 1;
      }
  }
  // 设置 input 背景色
  .inputBg(@a){
      background-color: @a;
      -webkit-tap-highlight-color: @a;

      &:-webkit-autofill {
          -webkit-box-shadow: 0 0 0px 1000px @a inset !important;
      }
  }
  //  设置 input 提示文字颜色
  .placeholder(@a){
        &::-webkit-input-placeholder {
              @a();
        }
        &:-webkit-input-placeholder {
              @a();
        }
        &:-moz-placeholder {
              @a();
        }
        &::-moz-placeholder {
              @a();
        }
        &:-ms-input-placeholder {
              @a();
        }
  }
  // 设置文字小于12px 解决方案
  .fontSize(@b){
      font-size: .6rem;
      transform: scale(@b/12);
      -ms-transform: scale(@b/12);
      -moz-transform: scale(@b/12);
      -webkit-transform: scale(@b/12);
      -o-transform: scale(@b/12);
  }
  // 设置 下边框
  .borderAfterBot(@a){
      & {
          content:' ';
          position: absolute;
          left: 0;
          top: auto;
          bottom: 0;
          right: auto;
          height: 1px;
          width: 100%;
          background-color: @a;
          display: block;
          z-index: 15;
          -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0
      }
      @media only screen and (-webkit-min-device-pixel-ratio:2) {
          & {
              -webkit-transform: scaleY(.5);
              transform: scaleY(.5)
          }
      }
      @media only screen and (-webkit-min-device-pixel-ratio:3) {
          & {
              -webkit-transform: scaleY(.33);
              transform: scaleY(.33)
          }
      }
  }
  // 设置 上边框
  .borderBeforeTop(@a){
      & {
          content: ' ';
          position: absolute;
          left: 0;
          top: 0;
          bottom: auto;
          right: auto;
          height: 1px;
          width: 100%;
          background-color: @a;
          display: block;
          z-index: 15;
          -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0
      }
      @media only screen and (-webkit-min-device-pixel-ratio:2) {
          & {
              -webkit-transform: scaleY(.5);
              transform: scaleY(.5)
          }
      }
      @media only screen and (-webkit-min-device-pixel-ratio:3) {
          & {
              -webkit-transform: scaleY(.33);
              transform: scaleY(.33)
          }
      }
  }
  // 设置 左边框
  .borderBeforeLeft(@a){
      & {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          right: auto;
          width: 1px;
          height: 100%;
          background-color: @a;
          display: block;
          z-index: 15;
          -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%
      }
      @media only screen and (-webkit-min-device-pixel-ratio:2) {
          & {
              -webkit-transform: scaleX(.5);
              transform: scaleX(.5)
          }
      }
      @media only screen and (-webkit-min-device-pixel-ratio:3) {
          & {
              -webkit-transform: scaleX(.33);
              transform: scaleX(.33)
          }
      }
  }
  // 设置 右边框
  .borderAfterRight(@a){
      & {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          left: auto;
          width: 1px;
          height: 100%;
          background-color: @a;
          display: block;
          z-index: 15;
          -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%
      }
      @media only screen and (-webkit-min-device-pixel-ratio:2) {
          & {
              -webkit-transform: scaleX(.5);
              transform: scaleX(.5)
          }
      }
      @media only screen and (-webkit-min-device-pixel-ratio:3) {
          & {
              -webkit-transform: scaleX(.33);
              transform: scaleX(.33)
          }
      }
  }
  // 单行文字超出隐藏 显示...
  .oneLineEllipsis(){
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
  }
  // 两行文字超出隐藏 显示...
  .twolineEllipsis(){
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
  }
  // 字体两端对齐公共样式
  .textJustify(){
      display: inline-block;
      float: left;
      height:100%;
      -webkit-text-align-last:justify;
      text-align-last:justify;
      text-justify:distribute-all-lines;
      text-align:justify;
      &:after{
          display:inline-block;
          overflow:hidden;
          width:100%;
          height:0;
          content:'';
          vertical-align:top;
      }
  }
  // displayFlex 兼容样式
  .displayFlex(){
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
  }
  // item 之间留有间距
  .displayFlexBetween(){
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
  }
  // item 前后留有间距
  .displayFlexAround(){
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: space-around;
      justify-content: space-around;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
  }
  // item 上下排列 平均分布
  .displayFlexStretch(){
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      align-items: stretch;
      flex-direction: column;
      justify-content: space-between;
      flex-wrap: nowrap;
      -webkit-box-orient:vertical;
      -webkit-box-direction:normal;
      box-orient:vertical;
      box-direction:normal;
  }
  // 站位容器 伸缩盒子
  .itemDisplayFlex(){
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      -ms-flex: 1;
      -webkit-flex: 1;
      flex: 1;
  }
  // 公共动画样式
  // 定义 从上进入 动画
  @-webkit-keyframes pageFromTopToCenter {
      from {
          -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
          opacity: .9
      }
      to {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 1
      }
  }
  @keyframes pageFromTopToCenter {
      from {
          -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
          opacity: .9
      }
      to {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 1
      }
  }
  // 定义 从上离开 动画
  @-webkit-keyframes pageFromCenterToTop {
      from {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 1
      }
      to {
          -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
          opacity: .9
      }
  }
  @keyframes pageFromCenterToTop {
      from {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 1
      }
      to {
          -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
          opacity: .9
      }
  }
  // 定义 从下进入 动画
  @-webkit-keyframes pageFromBotToCenter {
      from {
          -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
          opacity: .9
      }
      to {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 1
      }
  }
  @keyframes pageFromBotToCenter {
      from {
          -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
          opacity: .9
      }
      to {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 1
      }
  }
  // 定义 从下离开 动画
  @-webkit-keyframes pageFromCenterToBot {
      from {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 1
      }
      to {
          -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
          opacity: .9
      }
  }
  @keyframes pageFromCenterToBot {
      from {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 1
      }
      to {
          -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
          opacity: .9
      }
  }
  // 定义 从中间进入 动画
  @-webkit-keyframes pageFromCenToCenter {
      from {
          left: 50%;
          top: 50%;
          width: 10%;
          height: 10%;
          -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
          opacity: 0
      }
      to {
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 1
      }
  }
  @keyframes pageFromCenToCenter {
      from {
          left: 50%;
          top: 50%;
          width: 10%;
          height: 10%;
          -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
          opacity: 0
      }
      to {
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 1
      }
  }
  // 定义 从中间离开 动画
  @-webkit-keyframes pageFromCenterToCen {
      from {
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 1
      }
      to {
          left: 50%;
          top: 50%;
          width: 10%;
          height: 10%;
          -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
          opacity: 0
      }
  }
  @keyframes pageFromCenterToCen {
      from {
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 1
      }
      to {
          left: 50%;
          top: 50%;
          width: 10%;
          height: 10%;
          -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
          opacity: 0
      }
  }


  // RightToCenter 动画 从右进入
  .RightToCenter(){
      -webkit-animation: pageFromRightToCenter .4s forwards;
      animation: pageFromRightToCenter .4s forwards;
  }
  // LeftToCenter 动画 从左进入
  .LeftToCenter(){
      -webkit-animation: pageFromLeftToCenter .4s forwards;
      animation: pageFromLeftToCenter .4s forwards
  }
  // LeftToCenter 动画 从上进入
  .TopToCenter(){
      -webkit-animation: pageFromTopToCenter .4s forwards;
      animation: pageFromTopToCenter .4s forwards
  }
  // LeftToCenter 动画 从下进入
  .BotToCenter(){
      -webkit-animation: pageFromBotToCenter .4s forwards;
      animation: pageFromBotToCenter .4s forwards
  }
  // LeftToCenter 动画 从中间进入
  .CenToCenter(){
      -webkit-animation: pageFromCenToCenter .4s forwards;
      animation: pageFromCenToCenter .4s forwards
  }
  // CenterToRight 动画 从右离开
  .CenterToRight(){
      -webkit-animation: pageFromCenterToRight .4s forwards;
      animation: pageFromCenterToRight .4s forwards;
  }
  // CenterToLeft 动画 从左离开
  .CenterToLeft(){
      -webkit-animation: pageFromCenterToLeft .4s forwards;
      animation: pageFromCenterToLeft .4s forwards
  }
  // CenterToRight 动画 从下离开
  .CenterToBot(){
      -webkit-animation: pageFromCenterToBot .4s forwards;
      animation: pageFromCenterToBot .4s forwards;
  }
  // CenterToLeft 动画 从上离开
  .CenterToTop(){
      -webkit-animation: pageFromCenterToTop .4s forwards;
      animation: pageFromCenterToTop .4s forwards
  }
  // CenterToLeft 动画 从中间离开
  .CenterToCen(){
      -webkit-animation: pageFromCenterToCen .4s forwards;
      animation: pageFromCenterToCen .4s forwards
  }
